import React, { useState, useEffect } from "react"
import { IconButton, Button } from "@mui/material"
import DatePopover from "./DatePopover"
import ArrowBackIosNewOutlinedIcon from "@mui/icons-material/ArrowBackIosNewOutlined"
import ArrowForwardIosOutlinedIcon from "@mui/icons-material/ArrowForwardIosOutlined"
import WbSunnyIcon from "@mui/icons-material/WbSunny"

import { useSelector, useDispatch } from "react-redux"
import { setActiveDate } from "../../store/modules/date"

import dayjs from "../../utils/day"

export default function DatePicker() {
  const activeDate = useSelector((state) => state.date.activeDate)
  const dispatch = useDispatch()
  const setDate = (date) => dispatch(setActiveDate(date))
  useEffect(() => {
    setWeek(getThisWeek)
  }, [activeDate.week()])

  // 本周七天的日期对象数组
  const getThisWeek = Array.from({ length: 7 }).map((item, index) => {
    return activeDate.isoWeekday(index + 1)
  })

  const [thisWeek, setWeek] = useState(getThisWeek)

  // 判断是否为选择的日期
  const isActive = (item) => item.date() === activeDate.date()

  const toToday = () => {
    // 跳转至今天
    if (!dayjs().isSame(activeDate, "day")) {
      setDate(dayjs())
      setWeek(getThisWeek)
    }
  }

  const toLastWeek = () => {
    // 显示上一周日期
    const lastWeek = thisWeek.map((item, index) => {
      return dayjs(item).isoWeekday(index - 6)
    })
    setDate(dayjs(activeDate).subtract(7, "d"))
    setWeek(lastWeek)
  }

  const toNextWeek = () => {
    // 显示下一周日期
    const nextWeek = thisWeek.map((item, index) => {
      return dayjs(item).isoWeekday(index + 8)
    })
    setDate(dayjs(activeDate).add(7, "d"))
    setWeek(nextWeek)
  }

  const [anchorEl, setAnchorEl] = useState(null)
  const showDatePopover = () => {
    const datePickerTarget = document.getElementById("date-picker")
    setAnchorEl(datePickerTarget)
  }
  return (
    <div className="p-5 flex items-center ">
      <div
        className="inline-flex rounded-md bg-gray-50 p-1 items-center mr-2"
        id="date-picker"
      >
        {/* 上翻按钮 */}
        <IconButton
          size="small"
          onClick={() => {
            toLastWeek()
          }}
        >
          <ArrowBackIosNewOutlinedIcon fontSize="12px" />
        </IconButton>

        {/* 七天日期 */}
        {thisWeek.map((item) => {
          return (
            <div
              className={`flex items-center justify-center cursor-pointer w-7 h-7 rounded-full mx-1 ${
                isActive(item)
                  ? "bg-primary"
                  : item.isToday()
                  ? "bg-gray-200"
                  : "hover:bg-gray-200"
              }`}
              key={item}
              size="small"
              onClick={() => {
                setDate(item)
              }}
            >
              <span className="text-sm">
                {item.isToday() ? "今" : item.date()}
              </span>
            </div>
          )
        })}
        {/* 下翻按钮 */}
        <IconButton
          size="small"
          onClick={() => {
            toNextWeek()
          }}
        >
          <ArrowForwardIosOutlinedIcon fontSize="12px" />
        </IconButton>

        {/* 当前选中日期对应星期几 */}
        <Button variant="text" onClick={showDatePopover}>
          {`${activeDate.month() + 1}月${activeDate.date()}日 ${
            activeDate.isToday()
              ? "今天"
              : activeDate.localeData().weekdays(dayjs(activeDate))
          }`}
        </Button>
      </div>
      <Button variant="text" onClick={() => toToday()}>
        <WbSunnyIcon />
      </Button>
      <DatePopover anchorEl={anchorEl} setAnchorEl={setAnchorEl}></DatePopover>
    </div>
  )
}
